// src/components/login/LoginHeader.tsx

import { useState, useEffect } from 'react';

const LoginHeader = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => {
      setIsSmallScreen(window.innerWidth < 640);
    };

    checkScreenSize();

    window.addEventListener('resize', checkScreenSize);

    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <header className="mb-8 text-center">
      <div className="mb-4">
        <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
          <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h1
          id="login-header"
          className={`font-bold text-gray-800 mb-2 ${isSmallScreen ? 'text-2xl' : 'text-3xl'}`}
        >
          Co-op Dashboard
        </h1>
        <p className="text-gray-500 text-sm">
          Welcome back! Please sign in to your account
        </p>
      </div>
    </header>
  );
};

export default LoginHeader;